<template>
  <div class="manage">
    <!-- 商品添加/编辑对话框 -->
    <el-dialog
      title="商品信息"
      :visible.sync="dialogVisible"
      :before-close="handleClose">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="商品ID" prop="id">
          <el-input v-model="form.id" placeholder="请输入商品ID"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品型号" prop="model">
          <el-input v-model="form.model" placeholder="请输入商品型号"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input v-model="form.price" placeholder="请输入商品价格"></el-input>
        </el-form-item>
        <el-form-item label="修改时间" prop="modify">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.modify"
            style="width: 100%;"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 商品管理头部 -->
    <div class="manage-header">
      <el-button type="primary" @click="handleAdd">+新增商品</el-button>
    </div>

    <!-- 商品列表 -->
    <div class="common-table">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column prop="id" label="商品ID"></el-table-column>
        <el-table-column prop="name" label="商品名称"></el-table-column>
        <el-table-column prop="model" label="商品型号"></el-table-column>
        <el-table-column prop="price" label="商品价格"></el-table-column>
        <el-table-column prop="modify" label="修改时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" @click="handleDelete(scope.row)" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pager">
        <el-pagination
          @current-change="handleChange"
          :total="total"
          layout="prev, pager, next">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProductManagement",
  data() {
    return {
      dialogVisible: false,
      form: {
        id: '',
        name: '',
        model: '',
        price: '',
        modify: '',
      },
      rules: {
        id: [{ required: true, message: "请输入商品ID", trigger: "blur" }],
        name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
        model: [{ required: true, message: "请输入商品型号", trigger: "blur" }],
        price: [{ required: true, message: "请输入商品价格", trigger: "blur" }],
        modify: [{ required: true, message: "请选择修改时间", trigger: "change" }],
      },
      tableData: [],
      total: 0,
      pageData: {
        page: 1,
        limit: 10
      },
      // 以下属性用于分页和模拟数据
      allProducts: [],
      currentPage: 1,
      productsPerPage: 10,
    };
  },
  methods: {
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const index = this.tableData.findIndex(item => item.id === this.form.id);
          if (index === -1) {
            // 新增商品
            this.tableData.push({ ...this.form, id: this.tableData.length + 1 });
          } else {
            // 更新商品
            this.tableData.splice(index, 1, { ...this.form });
          }
          this.dialogVisible = false;
          this.$refs.form.resetFields();
          this.form = { id: '', name: '', model: '', price: '', modify: '' }; // 重置表单
          this.updateAllProducts(); // 更新模拟数据
        }
      });
    },
    handleClose() {
      this.dialogVisible = false;
      this.$refs.form.resetFields();
    },
    cancel() {
      this.handleClose();
    },
    handleEdit(row) {
      this.dialogVisible = true;
      this.form = { ...row };
    },
    handleDelete(row) {
      const index = this.tableData.findIndex(item => item.id === row.id);
      if (index !== -1) {
        this.tableData.splice(index, 1);
      }
      this.updateAllProducts(); // 更新模拟数据
    },
    handleAdd() {
      this.dialogVisible = true;
      this.form = { id: '', name: '', model: '', price: '', modify: '' }; // 初始化表单
    },
    handleChange(val) {
      this.pageData.page = val;
      this.updateTableData();
    },
    onSubmit() {
      // 搜索逻辑
    },
    updateTableData() {
      const startIndex = (this.pageData.page - 1) * this.pageData.limit;
      const endIndex = this.pageData.page * this.pageData.limit;
      this.tableData = this.allProducts.slice(startIndex, endIndex);
    },
    updateAllProducts() {
      // 将tableData数据同步回allProducts，并进行分页
      this.allProducts = JSON.parse(JSON.stringify(this.tableData));
      this.total = this.allProducts.length;
      this.updateTableData(); // 更新表格数据
    },
  },
  mounted() {
    // 模拟数据初始化
    this.updateAllProducts(); // 初始调用更新数据和分页
  }
};
</script>

<style scoped lang="less">
.manage {
  height: 90%;
  .manage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .common-table {
    position: relative;
    height: calc(100% - 58px);
  }
  .pager {
    position: absolute;
    bottom: 10px;
    right: 20px;
  }
}
</style>